<template>
    <div class="login">
        <el-row style="margin-top: 260px;z-index: 1;">
            <el-col :model="user" :offset="9" :span="6">
                <el-card class="login-box" v-loading="$store.state.loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-form>
                        <h1 class="title">影片设计与制作流程管理系统</h1>
                        <p class="login-box-msg">请登录!</p>
                        <el-form-item>
                            <el-input type="text" v-model="user.username" auto-complete="off" placeholder="请输入用户名..."
                                      suffix-icon="el-icon-bell"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="password" v-model="user.password" auto-complete="off" placeholder="请输入密码..."
                                      suffix-icon="el-icon-edit"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login" :loading="$store.state.loading" class="pull-right"
                                       style="width:100%">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<style>
    .login {
        background: url(../../assets/bg.png) no-repeat scroll center center / cover;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        position: fixed;
    }

    .login-box {
        background: #ffffff;
        border: none;
    }

    .login-box-msg {
        color: #000000;
        text-align: center;
    }

    .login-box .title {
        color: #000000;
        text-align: center;
    }
</style>
<script>

    export default {
        name: "Login",
        data() {
            return {
                user: {
                    username: "",
                    password: ""
                }
            };
        },
        methods: {
            login() {
                this.$store.dispatch('login', this.user).then(async response => {
                    console.log("登录成功： " + this.$store.getters.token)
                    await this.$store.dispatch('loadUserInfo', response.data)
                    console.log("passed loadUserInfo " )
                    this.$router.push({path: '/'})
                }).catch(error => {
                    console.log("logerror: " + error)
                })
            }


        }
    };
</script>
